<template>
  <div class="singers-box">
    <singer-list :data="this.singers" :letter="letter" @select="selectSinger"></singer-list>
    <singer-abc :data="this.singabc" @change="handleLetterChange"></singer-abc>
  </div>
</template>

<script>
import SingerList from '@/base/singer-list/singer-list'
import SingerAbc from '@/base/singer-list/singer-abc'
import { ERR_OK } from '@/common/js/common'
import pinyin from '@/common/js/vue-py'
import Singer from '@/common/js/sing'
import { getSingers } from '@/api/singer'
import { mapMutations } from 'vuex'

const HOT_NAME = '热门'
const HOT_SINGERS = 10

export default {
  data () {
    return {
      singers: [],
      // 字母表
      singabc: [],
      letter: ''
    }
  },
  components: {
    SingerList,
    SingerAbc
  },
  methods: {
    // 操作歌手详情页
    selectSinger (singer) {
      this.$router.push({
        path: `/singer/${singer.id}`
      })
      this.setFindNoneq(true)
      this.setSinger(singer)
      console.log(singer)
    },
    // 获取歌手列表
    _getSingers () {
      getSingers().then((res) => {
        if (res.status === ERR_OK) {
          var s = res.data.artists
          s.map((item) => {
            item.initial = pinyin.chineseToPinYin(item.name).toUpperCase()
          })
          this.singers = this._normalizeSinger(s)
          this.singers.forEach((group) => {
            // console.log(group.title.substr(0, 1))
            this.singabc.push(group.title.substr(0, 1))
          })
          // console.log(this.singers)
          // console.log(this.singabc)
        }
      })
    },
    // 获取歌手需要内容
    _normalizeSinger (list) {
      const map = {
        hot: {
          title: HOT_NAME,
          items: []
        }
      }
      list.forEach((item, index) => {
        if (index < HOT_SINGERS) {
          map.hot.items.push(new Singer({
            id: item.id,
            name: item.name,
            avatar: item.img1v1Url,
            aliaName: item.alias.join(' / ')
          }))
        }
        var key = item.initial
        if (!map[key]) {
          map[key] = {
            title: key,
            items: []
          }
        }
        map[key].items.push(new Singer({
          id: item.id,
          name: item.name,
          avatar: item.img1v1Url,
          aliaName: item.alias[0]
        }))
      })
      var hot = []
      var ret = []
      for (const key in map) {
        var val = map[key]
        if (val.title.match(/[A-Z]/)) {
          ret.push(val)
        } else if (val.title === HOT_NAME) {
          hot.push(val)
        }
      }
      ret.sort((a, b) => {
        return a.title.charCodeAt(0) - b.title.charCodeAt(0)
      })
      return hot.concat(ret)
    },
    handleLetterChange (letter) {
      this.letter = letter
      console.log(this.letter)
    },
    ...mapMutations({
      setSinger: 'SET_SINGER',
      setFindNoneq: 'SET_FINDNONEQ_STATE'
    })
  },
  mounted () {
    this._getSingers()
  }
}
</script>

<style scoped lang="less">
.singers-box {
  position: fixed;
  width: 100%;
  top: 80px;
  /*bottom: -100%;*/
  overflow: hidden;
  height: 100%;
  clear: both;
}
</style>
